<template>
  <div class="user_information">
    <van-nav-bar title="个人信息" left-text="返回" left-arrow @click-left="goback"/>
    <van-cell-group title="基本信息">
      <van-field label="姓名" v-model="userInfo.username" placeholder="请输入姓名" />
      <van-field label="手机号"  v-model="userInfo.phone"  placeholder="请输入手机号" />
      <van-field label="邮箱"  v-model="userInfo.email"  placeholder="请输入邮箱" />
      <van-cell :title-style="{fontWeight:'bold'}" icon="dingwei" title="收货地址" to="/user/address" isLink />
      <van-button type="primary" size="large" @click="saveUser">保存</van-button>
    </van-cell-group>

  </div>
</template>

<script>
import { Uploader, Picker, Popup, Button ,NavBar,Field,Toast } from 'vant';
import { removeLocalStorage } from '@/utils/local-storage';
import { getLocalStorage } from '@/utils/local-storage';
import { userIndex, authProfile,saveUser } from '@/api/api';

export default {
  data() {
    return {
      userInfo:{
        username:'',
        // nickname:'',
        phone:'',
        email:''
      }
    };
  },
  created(){
    this.getUserInfo();
  },

  activated() {
    // this.getUserInfo();
  },

  methods: {
    goback() {
      this.$router.go(-1);
    },
    saveUser(){
      saveUser(this.userInfo).then(res => {
        this.$toast("保存成功");
        this.$router.go(-1);
      });
    },
    getUserInfo() {
      userIndex().then(res => {
        const memberInfo = res.data.result;
        console.log(memberInfo,"memberInfo");
        this.userInfo.username = memberInfo.username||'';
        this.userInfo.email = memberInfo.email || '';
        this.userInfo.phone = memberInfo.phone || '';

      });
    }
  },

  components: {
    [NavBar.name]: NavBar,
    [Toast.name]: Toast,
    [Button.name]: Button,
    [Uploader.name]: Uploader,
    [Picker.name]: Picker,
    [Field.name]: Field,
    [Popup.name]: Popup
  }
};
</script>


<style lang="scss" scoped>
.user_information {
  .user_avatar_upload {
    position: relative;
    width: 50px;
    height: 50px;
    border: 1px solid $border-color;
    img {
      max-width: 100%;
      max-height: 100%;
    }
    i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      color: $border-color;
    }
  }
  .user_quit {
    margin-top: 20px;
  }
}
</style>
